<template>
	<view>
		<!-- 导航栏 -->
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">音频详情</block>
		</cu-custom>
		<view class="image margin-sm">
			<luch-audio style="" :play.sync="audioPlay" :src="src" :poster="poster" :name="fileName"  controls></luch-audio>
			<!-- <audio style="text-align: left;width: 100%;display: block;" :src="src" :poster="poster" :name="fileName"  controls></audio> -->
			<!-- <button @tap="play1">{{play}}</button> -->
			<!-- <video :src="src" show-play-btn class="fullscr" :poster="poster"  controls="true"></video> -->
		</view>

		<!-- 音频文件说明 -->
		<view class="cu-bar bg-mauve shadow-blur solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>音频文件资料
			</view>
		</view>
		<view class="bg-mauve light padding-tb-sm">
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">音频标题：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{title}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">音频说明：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{remark}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">文件名：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{fileName}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">上传人：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{name}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">共享种类：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{fileNature}}</view>
			</view>
			<view class="flex  p-xs solid-bottom margin-bottom-sm align-center ">
				<view class="flex-sub padding-xs margin-xs text-bold text-right">文件大小：</view>
				<view class="flex-treble pasdding-xs margin-xs text-left">{{size}}</view>
			</view>
		</view>
		<!-- 下载按钮 -->
		<view class="padding flex flex-direction">
			
			<!-- #ifdef H5 -->
			<button class="cu-btn bg-blue lg" @tap="h5download">下载</button>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<button class="cu-btn bg-blue lg" @tap="download">下载</button>
			<!-- #endif -->
		</view>
		
	</view>
</template>

<script>
	import luchAudio from "../../components/luch-audio/luch-audio.vue";
	import {mapState} from 'vuex';
	export default {
		components:{luchAudio},
		computed:mapState(['hasLogin','server']),
		data() {
			return {
				play: 'play',
				audioPlay:false,
				poster:'../../static/voice.jpg',
				//poster: this.server.url+'static/voice.jpg',
				src:'',
				downloadUrl:'',
				//poster:'',
				title:'',
				remark:'',
				fileName:'',
				fileNature:'',
				size:'',
				name:'',
				audioAction: {
					method: 'pause'
				},
				innerAudioContext:null,
				
			}
		},
		methods: {
			download(){
				uni.showLoading({
					title: '正在下载...',
					mask: true
				});
				uni.downloadFile({
					url: this.downloadUrl,
					success: res => {
						//console.log(res.tempFilePath);
						/* uni.saveFile({
							tempFilePath:res.tempFilePath,
							success: (resd) => {
								console.log(resd.savedFilePath);
							}
						}) */
						this.move_to_download_dir(res.tempFilePath);
					}
				});
			},
			h5download(){
				//window.open(this.src);
				show(this.downloadUrl);
			},
			move_to_download_dir(path){
				plus.io.resolveLocalFileSystemURL("_downloads/"+this.fileName,dfe=>{
					dfe.remove();
				},(e)=>{
					console.log('目标文件打开失败');
				});
				// 100毫秒以后执行,以保证上面的删除文件操异步作执行完
				plus.io.requestFileSystem(plus.io.PUBLIC_DOWNLOADS,fs=>{
					var parent=fs.root;
					setTimeout(()=> {
						plus.io.resolveLocalFileSystemURL(path,fEntry=>{
							fEntry.moveTo(parent,this.fileName,dfe=>{
								var filepath=dfe.toLocalURL().substr(27);
								//console.log(dfe.toLocalURL().substr(27));
								uni.hideLoading();
								// uni.showToast({
								// 	title: '文件下载成功,文件路径：'+filepath,
								// 	icon: 'success'
								// });
								uni.showModal({
									title: '文件下载成功',
									content: '文件保存路径：'+filepath,
									showCancel: false,
									cancelText: '',
									confirmText: '确定',
									success: res => {
										
									},
									fail: () => {},
									complete: () => {}
								});
							},(e)=>{
								uni.hideLoading();
								console.log(e.message);
							});
						});
					}, 100);
				});
				uni.hideLoading();
				
			},
			play1(){
				if(this.play=='stop'){
					this.play="play";
					this.innerAudioContext.pause();
					console.log('暂停');
				}else{
					this.play='stop';
					this.innerAudioContext.play();
					console.log('开始播放');
					
				}
				
			}
			
		},
		onLoad(e) {
			if(!this.hasLogin){
				uni.redirectTo({
					url:'./login'
				});
				return;
			}
			
			var fileid=e.fileid;
			var serverUrl=this.server.url;
			uni.request({
				url: serverUrl + 'app/findSysFileById',
				method: 'GET',
				sslVerify: false,
				data: {id : fileid},
				success: res => {
					var result= res.data;
					this.src= serverUrl +"media/"+result.fileUuid;
					this.downloadUrl= serverUrl + 'sysFile/app/download?fileUuid='+result.fileUuid;
					//this.poster= serverUrl + 'sysFile/app/download3?fileUuid='+result.fileUuid;
					this.title= result.fileTitle;
					this.remark= result.fileRemark;
					this.fileNature = result.fileNature.name;
					this.fileName=result.fileName;
					this.size= result.fileSize;
					this.name= result.uploadsName;

					/* let innerAudioContext = uni.createInnerAudioContext();
					innerAudioContext.autoplay=false;
					innerAudioContext.loop = false;
					innerAudioContext.src=this.src;
					this.innerAudioContext=innerAudioContext; */
					
				}
			});
		},
		beforeDestroy() {
			//this.innerAudioContext.destroy();
		}
		
	}
	function show(src){
		var myFrame= document.createElement('iframe');
		myFrame.src = src;//服务器路径
		myFrame.style.display = 'none';
		document.body.appendChild(myFrame);
	}
	
</script>

<style>
	.uni-audio-default {
		display: block;
		margin-left: 10upx;
		margin-right: 10upx;
	}
	.fullscr{
		width:750upx;
	}

</style>
